續上篇我們對 Transitions 的學習，我們實現幾個效果試試看吧！

接下來我們分爲上下篇依序實作這四個效果。上篇我們先實作上方兩個動畫。在這四個效果中，所有的方塊皆設置寬高爲 200px，撰寫於之後每個實作都會看到的 class box 中。以下解說會針對需要的 HTML 架構，及動畫的設置，CSS 樣式不在本篇贅述。

左上叉叉動畫實作解說

首先是 HTML 架構，如下方程式碼，盒子裡面有兩條線 box1_line1 及 box1_line2。共同樣式設置於 box1_line 。

<div class="box box1">
  <div class="box1_line box1_line1"></div>
  <div class="box1_line box1_line2"></div>
</div>

接著觀察一下，這裡有什麼動畫發生 1. 方塊背景顏色變化 2.線條轉動及顏色變化。接著我們直接從程式碼裡面看看有哪些重點。

.box1{
 background-color: #8DD0BA;
 transition: background-color 800ms ease-in;
}
.box1:hover{
 background-color: #F8D3DA;
}
.box1_line1 , .box1_line2{
 background-color: #206866;
 transition: transform 500ms ease-in,background-color 500ms ease-in;
}
.box1:hover .box1_line1{
 transform: translateY(100%) rotate(45deg);
 background-color: #B14454;
}
.box1:hover .box1_line2{
 transform: translateY(-100%) rotate(-45deg);
 background-color: #B14454;
}

重點解說：

1. 首先是方塊背景顏色變化，在 box1 的樣式中原本背景顏色爲 #8DD0BA ，接著設置動畫 transition: background-color 800ms ease-in; ，表示動畫效果發生於屬性 background-color ，發生時間持續 800ms ，動畫過程呈現方式爲 ease-in (開始時以緩速執行)。接著在 box1 被 hover 的時候改變背景顏色爲 #F8D3DA，此時因背景顏色改變，觸發動畫效果。
2. 在線條的部分，同時有線條轉動及顏色變化，動畫設定可以執行多個設定，之間以逗號分隔即可，例如：transition: transform 500ms ease-in,background-color 500ms ease-in; 。顏色變化的部分與方塊背景顏色變化觀念相同，就不贅述了。轉動的部分透過 transform 當中的 rotate 設定，box1_line1 轉動 45deg，box1_line2 轉動 -45deg，使之交叉。
3. transform 當中還設定了 translateY 的位移，是爲了讓兩條線重合，才能使兩條線在轉動後，爲一個正常的叉叉，如果在不重合的狀況下轉動，則出現的叉叉會是失衡的，即兩條線的交集點沒有在正中心。下圖爲不執行位移，叉叉失衡的狀況。可以試試看，唯有自己嘗試過，才能知道每條程式碼存在的原因。

右上動畫實作解說

首先是 HTML 架構，如下方程式碼，盒子裡面有另一個盒子 box2_circle。

<div class="box box2">
  <div class="box2_circle"></div>
</div>

觀察一下，這裡有什麼動畫發生 1. 背景顏色變化 2.方塊縮小並變爲圓型。接著我們一樣直接看看程式碼裏面有那些重點。

.box2{
 width: 200px;
 height: 200px; 
 margin: 10px;
 background-color: #7ECAE1;
 overflow: hidden; 
 transition: background-color 500ms ease-in;
}
.box2:hover{
 background-color: #214C97;
}
.box2_circle{
 width: 200px;
 height: 200px;
 background-color: #EFD19A;
 transition: border-radius 500ms ease-in,transform 500ms ease-in;
}
.box2:hover .box2_circle{
 border-radius:50%;
 transform: rotate(-45deg) scale(0.8);
}

重點解說：

1. 方塊背景顏色與實現一相同。
2. 此範例的實現方式，是讓子層的黃色方塊與父層藍色方塊等大並覆蓋，接著設置動畫使它變爲圓型並旋轉縮小。在動畫設置的部分 transition: border-radius 500ms ease-in,transform 500ms ease-in; ，表示動畫屬性發生於 border-radius 及 transform ，皆爲 500ms ，動畫過程呈現方式爲 ease-in (開始時以緩速執行)。接著當 box2 被 hover 的時候，發生改變觸發動畫，設置 border-radius:50% 變爲圓形，設置 ransform: rotate(-45deg) scale(0.8) 使之旋轉 -45deg 並縮小 0.8。

以上爲今天的小小實作，明天見